﻿<template>
  <div
    id="canvas"
    ref="canvas"
    style="
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      background: black;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    "
  >
    <div
      v-if="pageBackgroundImage != null"
      style="
        position: absolute;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
      "
      :style="{
        backgroundImage:
          'url(' +
          'http://' +
          resourceIp +
          ':8094/' +
          pageBackgroundImage +
          ')',
      }"
    ></div>

    <vdr
      id="editBar"
      v-if="!hideEditBar"
      :parent="true"
      :handles="['tm']"
      :draggable="true"
      :w="editBarWidth"
      axis="y"
      :h="editBarHeight"
      :x="0"
      :y="editBarTop"
      class-name-handle="my-handle-class"
      :z="1000"
      :onResize="onResizeEditCallback"
    >
      <div
        style="
          width: 100%;
          display: flex;
          position: absolute;
          bottom: 0;
          left: 0%;
          right: 0%;
          background-color: rgba(0, 0, 0, 0.5);
          color: white;
          border-top: solid 1px #89ffff;
          z-index: 1000;
        "
        :style="{
          height: editBarHeight + 'px',
        }"
      >
        <div
          id="hideEditBar"
          v-if="!hideEditBar"
          @click="hideEditBar = true"
          style="
            width: 300px;
            position: absolute;

            left: 0%;
            right: 0%;
            z-index: 1002;
            margin: auto;
            background: #89ffff;
            color: rgba(0, 0, 0, 0.5);
            cursor: pointer;
          "
          :style="{
            top: '0px',
          }"
        >
          ﹀
        </div>
        <div
          style="
            display: flex;
            flex-direction: column;
            width: 180px;
            height: 100%;
            overflow: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 0 5px;
          "
        >
          <div
            style="
              text-align: left;
              width: 100px;
              margin-top: 10px;
              flex-shrink: 0;
            "
          >
            背景图片
          </div>
          <div
            v-if="pageBackgroundImage == null"
            @click="clickFilenput"
            style="
              width: 100%;
              border: solid 1px grey;
              cursor: pointer;
              height: 80px;
              margin: 10px 0;
              flex-shrink: 0;
            "
          ></div>
          <img
            v-if="pageBackgroundImage != null"
            style="
              width: 100%;
              border: solid 1px grey;
              cursor: pointer;
              height: 80px;
              margin: 10px 0;
              flex-shrink: 0;
            "
            :src="'http://' + resourceIp + ':8094/' + pageBackgroundImage"
            alt=""
            @click="clickFilenput"
          />

          <input
            style="display: none"
            type="file"
            id="fileInput"
            accept="image/*"
            @change="uploadPhoto"
          />
          <div
            style="
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              flex-shrink: 0;
            "
          >
            <div style="text-align: left">页面名称</div>
            <input
              v-model="pageName"
              style="width: 100px; background: transparent"
            />
          </div>
          <el-button
            type="primary"
            @click="goOtherPage('/index')"
            style="
              width: 100%;
              margin-bottom: 10px;
              margin-left: 0;
              flex-shrink: 0;
            "
            >返回首页</el-button
          >
          <el-button
            @click="openAddAudioWin"
            type="primary"
            style="
              width: 100%;
              margin-bottom: 10px;
              margin-left: 0;
              flex-shrink: 0;
            "
            >语音指令</el-button
          >
          <el-button
            @click="goOtherPage('/displayPage/' + pageName + '/' + language)"
            type="primary"
            style="
              width: 100%;
              margin-bottom: 10px;
              margin-left: 0;
              flex-shrink: 0;
            "
            >预览页面</el-button
          >
          <el-button
            @click="addButtonGroupWin = true"
            type="primary"
            style="
              width: 100%;
              margin-bottom: 10px;
              flex-shrink: 0;
              margin-left: 0;
            "
            >按扭组合管理</el-button
          >

          <el-button
            @click="saveNewPage"
            type="primary"
            style="
              width: 100%;
              margin-bottom: 10px;
              margin-left: 0;
              flex-shrink: 0;
            "
            >保存页面</el-button
          >
          <el-button
            @click="cleanPage"
            type="danger"
            style="margin: 0; width: 100%; margin-bottom: 10px; flex-shrink: 0"
            >清空画布</el-button
          >
        </div>
        <div
          style="flex: 1; position: relative; padding: 10px; over-flow: scroll"
          :style="{ height: editBarHeight - 20 + 'px' }"
        >
          <!-- 不为空 -->
          <div
            style="
              display: flex;
              flex-direction: column;
              width: 100%;
              overflow: scroll;
              scrollbar-width: none;
              -ms-overflow-style: none;
            "
            :style="{ height: editBarHeight - 20 + 'px' }"
          >
            <div
              style="
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-shrink: 0;
              "
            >
              <div style="display: flex; align-items: center; flex-shrink: 0">
                <div style="width: 80px; text-align: left">类型</div>
                <div>
                  <input :disabled="true" v-model="curComponent.type" />
                </div>
              </div>

              <div style="display: flex; align-items: center; flex-shrink: 0">
                <el-button @click="copyCurComponent" type="primary"
                  >复制</el-button
                >
                <el-button @click="delCurComponent" type="danger"
                  >删除</el-button
                >
              </div>
            </div>
            <div
              style="
                width: 100%;
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
                margin: 10px 0;
              "
            >
              <div
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  flex-shrink: 0;
                "
              >
                <div style="width: 80px; text-align: left">所属组</div>
                <div
                  @click="delAddedGroup(index1)"
                  v-for="(item1, index1) in curComponent.addedButtonGroupArr"
                  :key="index1"
                  style="margin-right: 10px; cursor: pointer"
                >
                  {{ item1 }}
                </div>
              </div>

              <div
                v-if="curComponent.type == 'BUTTON'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  flex-shrink: 0;
                "
              >
                <el-select v-model="addingGroup" placeholder="请选择要添加的组">
                  <el-option
                    v-for="(item1, index1) in buttonGroupName"
                    :key="index1"
                    :label="item1"
                    :value="item1"
                  >
                  </el-option>
                </el-select>
                <el-button type="primary" @click="addedToButtonGroupArr"
                  >添加到组</el-button
                >
              </div>
            </div>
            <div
              v-if="curComponent.type == 'BUTTON'"
              style="
                width: 100%;
                display: flex;
                align-items: center;
                flex-shrink: 0;
                margin: 10px 0;
              "
            >
              <div style="width: 80px; text-align: left">文本</div>
              <div>
                <input
                  placeholder="简体中文"
                  v-model="curComponent.textChinese"
                />
                <input
                  style="margin: 0 10px"
                  placeholder="繁体中文"
                  v-model="curComponent.textTraditional"
                />
                <input placeholder="英文" v-model="curComponent.textEnglish" />
              </div>
            </div>
            <div
              v-if="
                curComponent.type == 'BUTTON' || curComponent.type == 'TEXTVIEW'
              "
              style="
                width: 100%;
                display: flex;
                align-items: center;
                flex-shrink: 0;
                margin: 10px 0;
              "
            >
              <div style="width: 80px; text-align: left">字体大小</div>
              <div>
                <input type="number" v-model="curComponent.fontSize" />
              </div>
            </div>
            <div
              v-if="
                curComponent.type == 'BUTTON' || curComponent.type == 'TEXTVIEW'
              "
              style="
                width: 100%;
                display: flex;
                align-items: center;
                flex-shrink: 0;
                margin: 10px 0;
              "
            >
              <div style="width: 80px; text-align: left">字体颜色</div>
              <div>
                <el-color-picker
                  v-model="curComponent.fontColor"
                ></el-color-picker>
              </div>
            </div>
            <div
              v-if="
                curComponent.type == 'BUTTON' || curComponent.type == 'TEXTVIEW'
              "
              style="
                width: 100%;
                display: flex;
                align-items: center;
                flex-shrink: 0;
                margin: 10px 0;
              "
            >
              <div style="width: 80px; text-align: left">背景颜色</div>
              <div>
                <el-color-picker
                  v-model="curComponent.backgroundColor"
                ></el-color-picker>
              </div>
            </div>
            <div
              v-if="curComponent.type == 'SWITCH'"
              style="
                width: 100%;
                display: flex;
                align-items: center;
                flex-shrink: 0;
                margin: 10px 0;
              "
            >
              <div style="width: 80px; text-align: left">激活颜色</div>
              <div>
                <el-color-picker
                  v-model="curComponent.activeColor"
                ></el-color-picker>
              </div>
            </div>
            <div
              v-if="curComponent.type == 'SWITCH'"
              style="
                width: 100%;
                display: flex;
                align-items: center;
                flex-shrink: 0;
                margin: 10px 0;
              "
            >
              <div style="width: 80px; text-align: left">未激活颜色</div>
              <div>
                <el-color-picker
                  v-model="curComponent.unActiveColor"
                ></el-color-picker>
              </div>
            </div>
            <div
              v-if="
                curComponent.type == 'BUTTON' || curComponent.type == 'TEXTVIEW'
              "
              style="
                width: 100%;
                display: flex;
                align-items: center;
                flex-shrink: 0;
                margin: 10px 0;
              "
            >
              <div style="width: 80px; text-align: left">边框圆角</div>
              <div>
                <input type="number" v-model="curComponent.borderCorner" />
              </div>
            </div>
            <div
              style="
                width: 100%;
                display: flex;
                align-items: center;
                flex-shrink: 0;
                margin: 10px 0;
              "
            >
              <div
                v-if="
                  curComponent.type == 'BUTTON' ||
                  curComponent.type == 'IMAGE' ||
                  curComponent.type == 'SLIDER'
                "
                style="width: 80px; text-align: left"
              >
                {{ curComponent.type == "SLIDER" ? "滑块" : "" }}背景图片
              </div>

              <div
                v-if="
                  curComponent.type == 'BUTTON' &&
                  curComponent.background == null
                "
                @click="clickFilenputForButton"
                style="
                  width: 200px;
                  border: solid 1px grey;
                  cursor: pointer;
                  height: 120px;
                  margin-right: 10px;
                "
              ></div>
              <img
                v-if="
                  curComponent.type == 'BUTTON' &&
                  curComponent.background != null
                "
                :src="
                  'http://' + resourceIp + ':8094/' + curComponent.background
                "
                style="
                  width: 200px;
                  border: solid 1px grey;
                  cursor: pointer;
                  height: 120px;
                  margin-right: 10px;
                "
                alt=""
                @click="clickFilenputForButton"
              />
              <img
                v-if="curComponent.type == 'IMAGE'"
                :src="
                  'http://' +
                  resourceIp +
                  ':8094/' +
                  (curComponent.src == null
                    ? require('../assets/empty.png')
                    : curComponent.src)
                "
                style="
                  width: 200px;
                  border: solid 1px grey;
                  cursor: pointer;
                  height: 120px;
                  margin-right: 10px;
                "
                alt=""
                @click="clickFilenputForImg"
              />
              <img
                v-if="curComponent.type == 'SLIDER'"
                :src="
                  'http://' +
                  resourceIp +
                  ':8094/' +
                  (curComponent.sliderBackground == null
                    ? require('../assets/empty.png')
                    : curComponent.sliderBackground)
                "
                style="
                  width: 200px;
                  border: solid 1px grey;
                  cursor: pointer;
                  height: 120px;
                  margin-right: 10px;
                "
                alt=""
                @click="clickFilenputForSlider"
              />

              <input
                style="display: none"
                type="file"
                id="fileInputForButton"
                accept="image/*"
                @change="uploadPhotoForButton"
              />

              <input
                style="display: none"
                type="file"
                id="fileInputForImg"
                accept="image/*"
                @change="uploadPhotoForImg"
              />

              <input
                style="display: none"
                type="file"
                id="fileInputForSlider"
                accept="image/*"
                @change="uploadPhotoForSlider"
              />
            </div>
            <div
              style="
                width: 100%;
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
              "
            >
              <div
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <el-checkbox
                  v-model="curComponent.conditionShow"
                  style="color: white"
                  >显示表达式</el-checkbox
                >
              </div>
              <div
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div style="width: 80px; text-align: left">变量名称</div>
                <input
                  :disabled="!curComponent.conditionShow"
                  style="width: 100px"
                  v-model="curComponent.displayVariableName"
                />
                <div style="margin-left: 10px; width: 70px; text-align: left">
                  变量值
                </div>
                <input
                  :disabled="!curComponent.conditionShow"
                  style="width: 100px"
                  v-model="curComponent.displayVariableValue"
                />
              </div>
              <div
                v-if="curComponent.type == 'SLIDER'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <el-checkbox
                  style="color: white"
                  v-model="curComponent.vertical"
                  >垂直</el-checkbox
                >
              </div>
              <div
                v-if="curComponent.type == 'SLIDER'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div style="width: 80px; text-align: left">最小值</div>
                <input style="width: 100px" v-model="curComponent.min" />
                <div style="margin-left: 10px; width: 70px; text-align: left">
                  最大值
                </div>
                <input style="width: 100px" v-model="curComponent.max" />
              </div>
              <div
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div style="width: 80px; text-align: left">宽</div>
                <input style="width: 100px" v-model="curComponent.w" />
                <div style="width: 70px; text-align: left; margin-left: 10px">
                  高
                </div>
                <input style="width: 100px" v-model="curComponent.h" />
              </div>
              <div
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div style="width: 80px; text-align: left">x</div>
                <input style="width: 100px" v-model="curComponent.x" />
                <div style="width: 70px; text-align: left; margin-left: 10px">
                  y
                </div>
                <input style="width: 100px" v-model="curComponent.y" />
              </div>
              <div
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div style="width: 80px; text-align: left">z</div>
                <input style="width: 100px" v-model="curComponent.z" />
              </div>
              <div
                v-if="curComponent.type == 'SLIDER'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div>轨道样式</div>
              </div>
              <div
                v-if="curComponent.type == 'SLIDER'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div style="width: 80px; text-align: left">背景色</div>
                <el-color-picker
                  style="width: 100px"
                  v-model="curComponent.railBackground"
                ></el-color-picker>
                <div style="margin-left: 10px; width: 70px; text-align: left">
                  进度色
                </div>
                <el-color-picker
                  style="width: 100px"
                  v-model="curComponent.railProgressColor"
                ></el-color-picker>
              </div>

              <div
                v-if="curComponent.type == 'SLIDER'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div style="width: 80px; text-align: left">边框宽度</div>
                <input
                  style="width: 100px"
                  v-model="curComponent.railBorderWidth"
                />
                <div style="margin-left: 10px; width: 70px; text-align: left">
                  边框颜色
                </div>
                <el-color-picker
                  style="width: 100px"
                  v-model="curComponent.railBorderColor"
                ></el-color-picker>
              </div>
              <div
                v-if="curComponent.type == 'SLIDER'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div style="width: 80px; text-align: left">边框圆角</div>
                <input
                  style="width: 100px"
                  v-model="curComponent.railBorderRoundCorner"
                />
              </div>
              <div
                v-if="curComponent.type == 'SLIDER'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div>滑块样式</div>
              </div>
              <div
                v-if="curComponent.type == 'SLIDER'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div style="width: 80px; text-align: left">长度</div>
                <input
                  style="width: 100px"
                  v-model="curComponent.sliderWidth"
                />
                <div style="margin-left: 10px; width: 70px; text-align: left">
                  高度
                </div>
                <input
                  style="width: 100px"
                  v-model="curComponent.sliderHeight"
                />
              </div>
              <div
                v-if="curComponent.type == 'SLIDER'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div style="width: 80px; text-align: left">上边距</div>
                <input
                  style="width: 100px"
                  v-model="curComponent.sliderMarginTop"
                />
                <div style="margin-left: 10px; width: 70px; text-align: left">
                  下边距
                </div>
                <input
                  style="width: 100px"
                  v-model="curComponent.sliderMarginBottom"
                />
              </div>
              <div
                v-if="curComponent.type == 'SLIDER'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div style="width: 80px; text-align: left">左边距</div>
                <input
                  style="width: 100px"
                  v-model="curComponent.sliderMarginLeft"
                />
                <div style="margin-left: 10px; width: 70px; text-align: left">
                  右边距
                </div>
                <input
                  style="width: 100px"
                  v-model="curComponent.sliderMarginRight"
                />
              </div>
              <div
                v-if="curComponent.type == 'TEXTVIEW'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div>文本（简体中文）</div>
                <input
                  type="textarea"
                  autosize
                  v-model="curComponent.textValue"
                />
              </div>
              <div
                v-if="curComponent.type == 'TEXTVIEW'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div>文本（繁體中文）</div>
                <input
                  type="textarea"
                  autosize
                  v-model="curComponent.traditionalTextValue"
                />
              </div>
              <div
                v-if="curComponent.type == 'TEXTVIEW'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div>文本（ENGLISH）</div>
                <input
                  type="textarea"
                  autosize
                  v-model="curComponent.englishTextValue"
                />
              </div>
              <div
                v-if="curComponent.type == 'SLIDER'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div>滑块值变量</div>
                <input
                  style="width: 100px"
                  v-model="curComponent.sliderVariable"
                />
              </div>
              <div
                v-if="curComponent.type == 'VIDEO'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div style="width: 100px; text-align: left">流地址变量</div>
                <input v-model="curComponent.streamVariable" />
              </div>
              <div
                v-if="curComponent.type == 'WEBPAGE'"
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 10px 0;
                "
              >
                <div style="width: 100px; text-align: left">网址变量</div>
                <input v-model="curComponent.webPageUrlVariable" />
              </div>
              <div
                v-if="curComponent.type == 'SWITCH'"
                style="width: 100%; display: flex; flex-direction: column"
              >
                <div style="width: 100%; text-align: left; margin: 10px 0">
                  开关打开表达式
                </div>
                <div
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <div style="width: 80px; text-align: left">开关变量</div>
                  <input
                    style="width: 100px"
                    v-model="curComponent.switchVariable"
                  />
                  <div style="margin-left: 10px; width: 70px; text-align: left">
                    变量值
                  </div>
                  <input
                    style="width: 100px"
                    v-model="curComponent.switchVariableValue"
                  />
                </div>
              </div>
            </div>
            <div
              style="
                width: 100%;
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
              "
            >
              <div
                style="
                  width: 100%;
                  text-align: left;

                  padding: 10px 0;
                "
              >
                事件
              </div>
              <div
                v-if="curComponent.type == 'SWITCH'"
                style="display: flex; flex-direction: column"
              >
                <div
                  style="
                    width: 100%;
                    text-align: left;

                    padding: 10px 0;
                  "
                >
                  切换
                </div>
                <!-- 事件开始 -->
                <div
                  v-for="(item, index) in curComponent.switchCommandList"
                  :key="index"
                  style="display: flex; flex-direction: column; width: 100%"
                >
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div>指令延时</div>
                    <div>
                      <input v-model="item.delay" />
                    </div>
                    <div>ms</div>
                  </div>
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">指令类型</div>
                    <div style="display: flex; align-items: center; flex: 1">
                      <el-select
                        style="width: 100px"
                        @change="changeEventType(item)"
                        v-model="item.eventType"
                        placeholder="请选择指令类型"
                      >
                        <el-option
                          v-for="(item1, index1) in instructionArr"
                          :key="item1.type"
                          :label="item1.type"
                          :value="index1"
                        >
                        </el-option>
                      </el-select>
                      <el-select
                        style="margin-left: 10px; width: 100px"
                        v-if="
                          item.sonInstructionArr != null &&
                          item.sonInstructionArr.length > 0
                        "
                        v-model="item.sonEventType"
                        placeholder="请选择类型"
                      >
                        <el-option
                          v-for="(item1, index1) in item.sonInstructionArr"
                          :key="item1"
                          :label="item1"
                          :value="index1"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 2 ||
                      item.eventType == 0
                    "
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div>IP地址</div>
                    <div>
                      <input v-model="item.ipAddress" />
                    </div>
                    <div>端口号</div>
                    <div>
                      <input v-model="item.port" />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 7"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div>音频文件</div>
                    <el-button @click="UploadAudio(index, 'clickUploadAudio')"
                      >选择音频文件</el-button
                    >
                    <div
                      style="
                        cursor: pointer;
                        border-bottom: solid 2px black;
                        margin: 0 10px;
                      "
                      @click="jumpToUrl(item.audioFilePath)"
                    >
                      {{ item.audioFilePath }}
                    </div>
                    <input
                      :id="'clickUploadAudio' + index"
                      v-show="false"
                      type="file"
                      accept="audio/wav"
                      @change="uploadAudioFile($event, index, 'click')"
                    />
                  </div>
                  <div
                    v-if="item.eventType == 6"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">串口编号</div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.serialNumber"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      波特率
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.baudRate"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      数据位
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.dataBits"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      停止位
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.stopBits"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      校验位
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.parityBits"
                      />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 3"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">变量名称</div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        v-model="item.beChangedVariableName"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      值
                    </div>
                    <div style="flex: 1">
                      <input
                        @input="countQuestionMarksForChangeVariableValue(item)"
                        style="width: 100%"
                        v-model="item.beChangedVariableValue"
                      />
                    </div>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2 ||
                      item.eventType == 6
                    "
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div>指令数据（用？表示需要填充的变量）</div>
                    <div>
                      <input
                        @input="countQuestionMarksForInput(item)"
                        v-model="item.instructionData"
                      />
                    </div>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2 ||
                      item.eventType == 3
                    "
                    style="width: 100%; display: flex; flex-direction: column"
                  >
                    <div
                      style="display: flex; align-items: center; margin: 10px 0"
                      v-for="(item1, index1) in item.inputValueArr"
                      :key="index1"
                    >
                      <div>变量{{ index1 + 1 }}表达式</div>
                      <input style="width: 100px" v-model="item1.valueName" />
                    </div>
                  </div>

                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2
                    "
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <el-checkbox v-model="item.getReturn" style="color: white"
                      >接收返回值</el-checkbox
                    >
                    <div>返回值提取格式（用?表示需要被提取的值）</div>
                    <input
                      @input="countQuestionMarks(item)"
                      v-model="item.returnFormat"
                    />
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2
                    "
                    style="width: 100%; display: flex; flex-direction: column"
                  >
                    <div
                      style="display: flex; align-items: center; margin: 10px 0"
                      v-for="(item1, index1) in item.returnValueArr"
                      :key="index1"
                    >
                      <div>变量{{ index1 + 1 }}名称</div>
                      <input style="width: 100px" v-model="item1.valueName" />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 8"
                    style="width: 100%; display: flex; align-items: center"
                  >
                    <div>命令行指令</div>
                    <input
                      v-model="item.instructionData"
                      style=""
                      type="text"
                    />
                  </div>
                  <el-button
                    @click="delCommand(item, 'switchCommandList', index)"
                    type="danger"
                    style="width: 100px; margin: 10px 0"
                    >删除指令</el-button
                  >
                </div>
                <el-button
                  style="width: 100px; margin: 10px 0"
                  type="primary"
                  @click="addSwitchEvent"
                  >添加指令</el-button
                >
              </div>
              <div
                v-if="curComponent.type == 'BUTTON'"
                style="display: flex; flex-direction: column"
              >
                <div style="width: 100%; text-align: left; padding: 10px 0">
                  点击
                </div>

                <div
                  v-for="(item, index) in curComponent.clickCommandList"
                  :key="index"
                  style="display: flex; flex-direction: column; width: 100%"
                >
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">指令延时</div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%; margin-right: 10px"
                        v-model="item.delay"
                      />
                    </div>
                    <div>ms</div>
                  </div>
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">指令类型</div>
                    <div style="display: flex; align-items: center; flex: 1">
                      <el-select
                        style="width: 100px"
                        @change="changeEventType(item)"
                        v-model="item.eventType"
                        placeholder="请选择指令类型"
                      >
                        <el-option
                          v-for="(item1, index1) in instructionArr"
                          :key="item1.type"
                          :label="item1.type"
                          :value="index1"
                        >
                        </el-option>
                      </el-select>
                      <el-select
                        style="margin-left: 10px; width: 100px"
                        v-if="
                          item.sonInstructionArr != null &&
                          item.sonInstructionArr.length > 0
                        "
                        v-model="item.sonEventType"
                        placeholder="请选择类型"
                      >
                        <el-option
                          v-for="(item1, index1) in item.sonInstructionArr"
                          :key="item1"
                          :label="item1"
                          :value="index1"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2
                    "
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">IP地址</div>
                    <div style="flex: 1">
                      <input style="width: 100%" v-model="item.ipAddress" />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      端口号
                    </div>
                    <div style="flex: 1">
                      <input style="width: 100%" v-model="item.port" />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 7"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <!-- <div>音频文件</div>
                    <el-button @click="UploadAudio(index, 'clickUploadAudio')"
                      >选择音频文件</el-button
                    >
                    <div
                      style="
                        cursor: pointer;
                        border-bottom: solid 2px black;
                        margin: 0 10px;
                      "
                      @click="jumpToUrl(item.audioFilePath)"
                    >
                      {{ item.audioFilePath }}
                    </div>
                    <input
                      :id="'clickUploadAudio' + index"
                      v-show="false"
                      type="file"
                      accept="audio/wav"
                      @change="uploadAudioFile($event, index, 'click')"
                    /> -->
                    <div
                      v-if="item.sonEventType == 0"
                      style="display: flex; align-items: center"
                    >
                      <div style="width: 80px; text-align: left">文本信息</div>
                      <textArea
                        v-model="item.infoText"
                        style="color: black"
                      ></textArea>
                    </div>
                    <div
                      v-if="item.sonEventType == 1"
                      style="display: flex; align-items: center"
                    >
                      <div style="width: 80px; text-align: left">视频地址</div>
                      <textarea
                        v-model="item.videoFilePath"
                        style="width: 300px; color: black"
                      />
                      <el-button
                        type="primary"
                        style="margin-left: 10px"
                        @click="UploadVideo(index, 'clickUploadVideo')"
                        >本地视频</el-button
                      >
                      <div
                        style="
                          cursor: pointer;
                          border-bottom: solid 2px white;
                          margin: 0 10px;
                          width: 100px;
                          height: 20px;
                          color: white;
                        "
                        @click="jumpToUrl(item.videoFilePath)"
                      >
                        {{ item.videoFilePath }}
                      </div>
                      <input
                        :id="'clickUploadVideo' + index"
                        v-show="false"
                        type="file"
                        @change="uploadVideoFile($event, index, 'click')"
                      />
                    </div>
                    <div
                      v-if="item.sonEventType == 2"
                      style="display: flex; align-items: center"
                    >
                      <div style="width: 80px; text-align: left">图片地址</div>
                      <textarea
                        v-model="item.imageFilePath"
                        style="width: 300px; color: black"
                      />
                      <el-button
                        type="primary"
                        style="margin-left: 10px"
                        @click="UploadImage(index, 'clickUploadImage')"
                        >本地图片</el-button
                      >
                      <div
                        style="
                          cursor: pointer;
                          border-bottom: solid 2px white;
                          margin: 0 10px;
                          width: 100px;
                          height: 20px;
                          color: white;
                        "
                        @click="jumpToUrl(item.imageFilePath)"
                      >
                        {{ item.imageFilePath }}
                      </div>
                      <input
                        :id="'clickUploadImage' + index"
                        v-show="false"
                        type="file"
                        @change="uploadImageFile($event, index, 'click')"
                      />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 6"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">串口编号</div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.serialNumber"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      波特率
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.baudRate"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      数据位
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.dataBits"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      停止位
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.stopBits"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      校验位
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.parityBits"
                      />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 3"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">变量名称</div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        v-model="item.beChangedVariableName"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      值
                    </div>
                    <div style="flex: 1">
                      <input
                        @input="countQuestionMarksForChangeVariableValue(item)"
                        style="width: 100%"
                        v-model="item.beChangedVariableValue"
                      />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 4"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">组合名称</div>
                    <el-select
                      style="margin-left: 10px; flex: 1"
                      placeholder="请选择要触发的组合"
                      v-model="item.triggerGroup"
                    >
                      <el-option
                        v-for="(item1, index1) in buttonGroupName"
                        :key="index1"
                        :label="item1"
                        :value="item1"
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2 ||
                      item.eventType == 6
                    "
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="text-align: left">
                      指令数据（用？表示需要填充的变量）
                    </div>
                    <div style="flex: 1; display: flex; align-items: center">
                      <input
                        style="flex: 1"
                        @input="countQuestionMarksForInput(item)"
                        v-model="item.instructionData"
                      />
                    </div>
                    <el-checkbox
                      v-model="item.hexadecimal"
                      style="margin-left: 10px; color: white"
                      >十六进制</el-checkbox
                    >
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2 ||
                      item.eventType == 3
                    "
                    style="
                      width: 100%;
                      display: flex;
                      flex-direction: column;
                      margin: 10px 0;
                    "
                  >
                    <div
                      style="display: flex; align-items: center"
                      v-for="(item1, index1) in item.inputValueArr"
                      :key="index1"
                    >
                      <div>变量{{ index1 + 1 }}表达式</div>
                      <input style="width: 100px" v-model="item1.valueName" />
                    </div>
                  </div>

                  <div
                    v-if="item.eventType == 2"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">请求路径</div>
                    <div style="flex: 1">
                      <input style="width: 100%" v-model="item.requestPath" />
                    </div>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2
                    "
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <el-checkbox v-model="item.getReturn" style="color: white"
                      >接收返回值</el-checkbox
                    >
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2
                    "
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="text-align: left">
                      返回值提取格式（用?表示需要被提取的值）
                    </div>
                    <input
                      style="flex: 1"
                      @input="countQuestionMarks(item)"
                      v-model="item.returnFormat"
                      :disabled="!item.getReturn"
                    />
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2
                    "
                    style="
                      width: 100%;
                      display: flex;
                      flex-direction: column;
                      margin: 10px 0;
                    "
                  >
                    <div
                      style="display: flex; align-items: center"
                      v-for="(item1, index1) in item.returnValueArr"
                      :key="index1"
                    >
                      <div>变量{{ index1 + 1 }}名称</div>
                      <input style="width: 100px" v-model="item1.valueName" />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 8"
                    style="width: 100%; display: flex; align-items: center"
                  >
                    <div>命令行指令</div>
                    <input v-model="item.instructionData" type="text" />
                  </div>
                  <div
                    v-if="item.eventType == 5"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div>音频文件</div>
                    <el-button @click="UploadAudio(index, 'clickUploadAudio')"
                      >选择音频文件</el-button
                    >
                    <div
                      style="
                        cursor: pointer;
                        border-bottom: solid 2px black;
                        margin: 0 10px;
                      "
                      @click="jumpToUrl(item.audioFilePath)"
                    >
                      {{ item.audioFilePath }}
                    </div>
                    <input
                      :id="'clickUploadAudio' + index"
                      v-show="false"
                      type="file"
                      accept="audio/wav"
                      @change="uploadAudioFile($event, index, 'click')"
                    />
                  </div>
                  <el-button
                    @click="delCommand(item, 'clickCommandList', index)"
                    type="danger"
                    style="width: 100px; margin: 10px 0"
                    >删除指令</el-button
                  >
                </div>
                <el-button
                  style="width: 100px; margin: 10px 0"
                  type="primary"
                  @click="addClickEvent"
                  >添加指令</el-button
                >
              </div>
              <!-- 初始化start -->
              <div style="display: flex; flex-direction: column">
                <div
                  style="
                    width: 100%;
                    text-align: left;

                    padding: 10px 0;
                  "
                >
                  初始化
                </div>
                <div
                  v-for="(item, index) in curComponent.initCommandList"
                  :key="index"
                  style="display: flex; flex-direction: column; width: 100%"
                >
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">指令延时</div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%; margin-right: 10px"
                        v-model="item.delay"
                      />
                    </div>
                    <div>ms</div>
                  </div>
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">指令类型</div>
                    <div style="display: flex; align-items: center; flex: 1">
                      <el-select
                        style="width: 100px"
                        @change="changeEventType(item)"
                        v-model="item.eventType"
                        placeholder="请选择指令类型"
                      >
                        <el-option
                          v-for="(item1, index1) in instructionArr"
                          :key="item1.type"
                          :label="item1.type"
                          :value="index1"
                        >
                        </el-option>
                      </el-select>
                      <el-select
                        style="margin-left: 10px; width: 100px"
                        v-if="
                          item.sonInstructionArr != null &&
                          item.sonInstructionArr.length > 0
                        "
                        v-model="item.sonEventType"
                        placeholder="请选择类型"
                      >
                        <el-option
                          v-for="(item1, index1) in item.sonInstructionArr"
                          :key="item1"
                          :label="item1"
                          :value="index1"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2
                    "
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px">IP地址</div>
                    <div>
                      <input v-model="item.ipAddress" />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      端口号
                    </div>
                    <div>
                      <input v-model="item.port" />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 7"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div>音频文件</div>
                    <el-button @click="UploadAudio(index, 'clickUploadAudio')"
                      >选择音频文件</el-button
                    >
                    <div
                      style="
                        cursor: pointer;
                        border-bottom: solid 2px black;
                        margin: 0 10px;
                      "
                      @click="jumpToUrl(item.audioFilePath)"
                    >
                      {{ item.audioFilePath }}
                    </div>
                    <input
                      :id="'clickUploadAudio' + index"
                      v-show="false"
                      type="file"
                      accept="audio/wav"
                      @change="uploadAudioFile($event, index, 'click')"
                    />
                  </div>
                  <div
                    v-if="item.eventType == 6"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">串口编号</div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.serialNumber"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      波特率
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.baudRate"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      数据位
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.dataBits"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      停止位
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.stopBits"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      校验位
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.parityBits"
                      />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 3"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">变量名称</div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        v-model="item.beChangedVariableName"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      值
                    </div>
                    <div style="flex: 1">
                      <input
                        @input="countQuestionMarksForChangeVariableValue(item)"
                        style="width: 100%"
                        v-model="item.beChangedVariableValue"
                      />
                    </div>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2 ||
                      item.eventType == 6
                    "
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="text-align: left">
                      指令数据（用？表示需要填充的变量）
                    </div>
                    <div>
                      <input
                        @input="countQuestionMarksForInput(item)"
                        v-model="item.instructionData"
                      />
                    </div>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2 ||
                      item.eventType == 3
                    "
                    style="
                      width: 100%;
                      display: flex;
                      flex-direction: column;
                      margin: 10px 0;
                    "
                  >
                    <div
                      style="display: flex; align-items: center"
                      v-for="(item1, index1) in item.inputValueArr"
                      :key="index1"
                    >
                      <div>变量{{ index1 + 1 }}表达式</div>
                      <input style="width: 100px" v-model="item1.valueName" />
                    </div>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2
                    "
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <el-checkbox v-model="item.getReturn" style="color: white"
                      >接收返回值</el-checkbox
                    >
                    <div>返回值提取格式（用?表示需要被提取的值）</div>
                    <input
                      @input="countQuestionMarks(item)"
                      v-model="item.returnFormat"
                    />
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2
                    "
                    style="
                      width: 100%;
                      display: flex;
                      flex-direction: column;
                      margin: 10px 0;
                    "
                  >
                    <div
                      style="display: flex; align-items: center"
                      v-for="(item1, index1) in item.returnValueArr"
                      :key="index1"
                    >
                      <div>变量{{ index1 + 1 }}名称</div>
                      <input style="width: 100px" v-model="item1.valueName" />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 8"
                    style="width: 100%; display: flex; align-items: center"
                  >
                    <div>命令行指令</div>
                    <input v-model="item.instructionData" type="text" />
                  </div>
                  <div
                    v-if="item.eventType == 5"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div>音频文件</div>
                    <el-button @click="UploadAudio(index, 'initUploadAudio')"
                      >选择音频文件</el-button
                    >
                    <div
                      style="
                        cursor: pointer;
                        border-bottom: solid 2px black;
                        margin: 0 10px;
                      "
                      @click="jumpToUrl(item.audioFilePath)"
                    >
                      {{ item.audioFilePath }}
                    </div>
                    <input
                      :id="'initUploadAudio' + index"
                      v-show="false"
                      type="file"
                      accept="audio/wav"
                      @change="uploadAudioFile($event, index, 'init')"
                    />
                  </div>
                  <el-button
                    @click="delCommand(item, 'initCommandList', index)"
                    type="danger"
                    style="width: 100px; margin: 10px 0"
                    >删除指令</el-button
                  >
                </div>
                <el-button
                  style="width: 100px; margin: 10px 0"
                  type="primary"
                  @click="addInitEvent"
                  >添加指令</el-button
                >
              </div>
              <!-- 初始化end -->
              <div
                v-if="curComponent.type == 'SLIDER'"
                style="display: flex; flex-direction: column"
              >
                <div style="width: 100%; display: flex; align-items: center">
                  滑动
                </div>
                <div
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <el-checkbox
                    v-model="curComponent.keepLast"
                    style="color: white"
                    >保存上一次滑动的值</el-checkbox
                  >
                  <div style="margin: 10px">变量名</div>
                  <input
                    style="width: 200px"
                    v-model="curComponent.lastSlideName"
                  />
                </div>
                <div
                  v-for="(item, index) in curComponent.slideCommandList"
                  :key="index"
                  style="display: flex; flex-direction: column; width: 100%"
                >
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div>指令延时</div>
                    <div>
                      <input v-model="item.delay" />
                    </div>
                    <div>ms</div>
                  </div>
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="margin: 10px">指令类型</div>
                    <div style="display: flex; align-items: center; flex: 1">
                      <el-select
                        style="width: 100px"
                        @change="changeEventType(item)"
                        v-model="item.eventType"
                        placeholder="请选择指令类型"
                      >
                        <el-option
                          v-for="(item1, index1) in instructionArr"
                          :key="item1.type"
                          :label="item1.type"
                          :value="index1"
                        >
                        </el-option>
                      </el-select>
                      <el-select
                        style="margin-left: 10px; width: 100px"
                        v-if="
                          item.sonInstructionArr != null &&
                          item.sonInstructionArr.length > 0
                        "
                        v-model="item.sonEventType"
                        placeholder="请选择类型"
                      >
                        <el-option
                          v-for="(item1, index1) in item.sonInstructionArr"
                          :key="item1"
                          :label="item1"
                          :value="index1"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2
                    "
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div>IP地址</div>
                    <div>
                      <input v-model="item.ipAddress" />
                    </div>
                    <div>端口号</div>
                    <div>
                      <input v-model="item.port" />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 7"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div>音频文件</div>
                    <el-button @click="UploadAudio(index, 'clickUploadAudio')"
                      >选择音频文件</el-button
                    >
                    <div
                      style="
                        cursor: pointer;
                        border-bottom: solid 2px black;
                        margin: 0 10px;
                      "
                      @click="jumpToUrl(item.audioFilePath)"
                    >
                      {{ item.audioFilePath }}
                    </div>
                    <input
                      :id="'clickUploadAudio' + index"
                      v-show="false"
                      type="file"
                      accept="audio/wav"
                      @change="uploadAudioFile($event, index, 'click')"
                    />
                  </div>
                  <div
                    v-if="item.eventType == 6"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">串口编号</div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.serialNumber"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      波特率
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.baudRate"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      数据位
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.dataBits"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      停止位
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.stopBits"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      校验位
                    </div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        type="number"
                        v-model="item.parityBits"
                      />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 3"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div style="width: 80px; text-align: left">变量名称</div>
                    <div style="flex: 1">
                      <input
                        style="width: 100%"
                        v-model="item.beChangedVariableName"
                      />
                    </div>
                    <div
                      style="width: 70px; margin-left: 10px; text-align: left"
                    >
                      值
                    </div>
                    <div style="flex: 1">
                      <input
                        @input="countQuestionMarksForChangeVariableValue(item)"
                        style="width: 100%"
                        v-model="item.beChangedVariableValue"
                      />
                    </div>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2 ||
                      item.eventType == 6
                    "
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div>指令数据（用？表示需要填充的变量）</div>
                    <div>
                      <input
                        @input="countQuestionMarksForInput(item)"
                        v-model="item.instructionData"
                      />
                    </div>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2 ||
                      item.eventType == 3
                    "
                    style="
                      width: 100%;
                      display: flex;
                      flex-direction: column;
                      margin: 10px 0;
                    "
                  >
                    <div
                      style="display: flex; align-items: center"
                      v-for="(item1, index1) in item.inputValueArr"
                      :key="index1"
                    >
                      <div>变量{{ index1 + 1 }}表达式</div>
                      <input style="width: 100px" v-model="item1.valueName" />
                    </div>
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2
                    "
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <el-checkbox v-model="item.getReturn" style="color: white"
                      >接收返回值</el-checkbox
                    >
                    <div>返回值提取格式（用?表示需要被提取的值）</div>
                    <input
                      @input="countQuestionMarks(item)"
                      v-model="item.returnFormat"
                    />
                  </div>
                  <div
                    v-if="
                      item.eventType == 1 ||
                      item.eventType == 0 ||
                      item.eventType == 2
                    "
                    style="
                      width: 100%;
                      display: flex;
                      flex-direction: column;
                      margin: 10px 0;
                    "
                  >
                    <div
                      style="display: flex; align-items: center"
                      v-for="(item1, index1) in item.returnValueArr"
                      :key="index1"
                    >
                      <div>变量{{ index1 + 1 }}名称</div>
                      <input style="width: 100px" v-model="item1.valueName" />
                    </div>
                  </div>
                  <div
                    v-if="item.eventType == 8"
                    style="width: 100%; display: flex; align-items: center"
                  >
                    <div>命令行指令</div>
                    <input v-model="item.instructionData" type="text" />
                  </div>
                  <div
                    v-if="item.eventType == 5"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin: 10px 0;
                    "
                  >
                    <div>音频文件</div>
                    <el-button @click="UploadAudio(index, 'slideUploadAudio')"
                      >选择音频文件</el-button
                    >
                    <div
                      style="
                        cursor: pointer;
                        border-bottom: solid 2px black;
                        margin: 0 10px;
                      "
                      @click="jumpToUrl(item.audioFilePath)"
                    >
                      {{ item.audioFilePath }}
                    </div>
                    <input
                      :id="'slideUploadAudio' + index"
                      v-show="false"
                      type="file"
                      accept="audio/wav"
                      @change="uploadAudioFile($event, index, 'slide')"
                    />
                  </div>
                  <el-button
                    @click="delCommand(item, 'slideCommandList', index)"
                    type="danger"
                    style="width: 100px; margin: 10px 0"
                    >删除指令</el-button
                  >
                </div>
                <el-button
                  style="width: 100px; margin: 10px 0"
                  type="primary"
                  @click="addSliderEvent"
                  >添加指令</el-button
                >
              </div>
            </div>
          </div>
          <!-- 为空 -->
          <div
            v-if="curComponentIndex == null"
            style="
              position: absolute;
              width: 100%;
              height: 100%;
              background-color: rgba(211, 246, 241, 0.8);
              z-index: 1001;
              top: 0%;
              left: 0%;
            "
          ></div>
        </div>

        <div
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 180px;
            height: 100%;
            overflow: auto;

            scrollbar-width: none;
            -ms-overflow-style: none;
          "
        >
          <el-button
            @click="createButton"
            type="primary"
            style="margin: 5px 0; width: 95%; flex-shrink: 0"
            >按钮</el-button
          >

          <el-button
            @click="createSwitch"
            type="primary"
            style="margin: 5px 0; width: 95%; flex-shrink: 0"
            >开关</el-button
          >
          <el-button
            @click="createSlider"
            type="primary"
            style="margin: 5px 0; width: 95%; flex-shrink: 0"
            >滑块</el-button
          >
          <el-button
            @click="createImg"
            type="primary"
            style="margin: 5px 0; width: 95%; flex-shrink: 0"
            >图片</el-button
          >
          <el-button
            @click="createTextView"
            type="primary"
            style="margin: 5px 0; width: 95%; flex-shrink: 0"
            >文本框</el-button
          >
          <el-button
            @click="createVideo"
            type="primary"
            style="margin: 5px 0; width: 95%; flex-shrink: 0"
            >流媒体</el-button
          >
          <el-button
            @click="createWebPage"
            type="primary"
            style="margin: 5px 0; width: 95%; flex-shrink: 0"
            >网页</el-button
          >
        </div>
      </div>
    </vdr>

    <div
      id="showEditBar"
      v-if="hideEditBar"
      @click="hideEditBar = false"
      style="
        width: 300px;
        position: absolute;
        bottom: 0;
        left: 0%;
        right: 0%;
        z-index: 1000;
        margin: auto;
        background: #89ffff;
        color: rgba(0, 0, 0, 0.5);
        cursor: pointer;
        overflow: auto;
      "
    >
      ︿
    </div>

    <el-dialog title="按钮组合管理" :visible.sync="addButtonGroupWin">
      <div style="width: 100%; display: flex; flex-direction: column">
        <div
          v-for="(item, index) in buttonGroupName"
          :key="index"
          style="
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
          "
        >
          <div>{{ item }}</div>
          <el-button type="danger">删除</el-button>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <input
            placeholder="请输入按钮组合名称"
            v-model="newButtonGroupName"
          />
          <el-button type="primary" @click="addButtonGroup"
            >创建按钮组合</el-button
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addButtonGroupWin = false">取 消</el-button>
        <el-button type="primary" @click="addButtonGroupWin = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="语音指令管理" :visible.sync="addAudioCommandDialog">
      <div
        style="width: 100%; display: flex; flex-direction: column; color: white"
      >
        <el-collapse v-model="activeNames" @change="handleChange" accordion>
          <el-collapse-item
            :title="audioItem.commandName"
            :name="andioIndex + 1"
            v-for="(audioItem, andioIndex) in audioList"
            :key="andioIndex"
            style="
              width: 100%;

              margin-bottom: 10px;
            "
          >
            <div style="width: 100%; display: flex; flex-direction: column">
              <div
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                "
              >
                <div>指令名称：</div>
                <input
                  type="text"
                  style="border-bottom: solid black 1px; color: black"
                  v-model="audioItem.commandName"
                />
              </div>
              <div
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                "
              >
                <div>指令口令：</div>
                <input
                  type="text"
                  style="border-bottom: solid black 1px; color: black"
                  v-model="audioItem.commandAudio"
                />
              </div>
              <div
                v-for="(item, index) in audioItem.audioCommandList"
                :key="index"
                style="width: 100%; display: flex; flex-direction: column"
              >
                <div
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <div style="width: 80px; text-align: left">指令类型</div>
                  <div style="display: flex; align-items: center; flex: 1">
                    <el-select
                      style="width: 100px"
                      @change="changeEventType(item)"
                      v-model="item.eventType"
                      placeholder="请选择指令类型"
                    >
                      <el-option
                        v-for="(item1, index1) in instructionArr"
                        :key="item1.type"
                        :label="item1.type"
                        :value="index1"
                      >
                      </el-option>
                    </el-select>
                    <el-select
                      style="margin-left: 10px; width: 100px"
                      v-if="
                        item.sonInstructionArr != null &&
                        item.sonInstructionArr.length > 0
                      "
                      v-model="item.sonEventType"
                      placeholder="请选择类型"
                    >
                      <el-option
                        v-for="(item1, index1) in item.sonInstructionArr"
                        :key="item1"
                        :label="item1"
                        :value="index1"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div
                  v-if="
                    item.eventType == 1 ||
                    item.eventType == 2 ||
                    item.eventType == 0
                  "
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <div>IP地址</div>
                  <div>
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      v-model="item.ipAddress"
                    />
                  </div>
                  <div>端口号</div>
                  <div>
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      v-model="item.port"
                    />
                  </div>
                </div>
                <div
                  v-if="item.eventType == 6"
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <div style="width: 80px; text-align: left">串口编号</div>
                  <div style="flex: 1">
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      type="number"
                      v-model="item.serialNumber"
                    />
                  </div>
                  <div style="width: 70px; margin-left: 10px; text-align: left">
                    波特率
                  </div>
                  <div style="flex: 1">
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      type="number"
                      v-model="item.baudRate"
                    />
                  </div>
                  <div style="width: 70px; margin-left: 10px; text-align: left">
                    数据位
                  </div>
                  <div style="flex: 1">
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      type="number"
                      v-model="item.dataBits"
                    />
                  </div>
                  <div style="width: 70px; margin-left: 10px; text-align: left">
                    停止位
                  </div>
                  <div style="flex: 1">
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      type="number"
                      v-model="item.stopBits"
                    />
                  </div>
                  <div style="width: 70px; margin-left: 10px; text-align: left">
                    校验位
                  </div>
                  <div style="flex: 1">
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      type="number"
                      v-model="item.parityBits"
                    />
                  </div>
                </div>
                <div
                  v-if="item.eventType == 3"
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <div style="width: 80px; text-align: left">变量名称</div>
                  <div style="flex: 1">
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      v-model="item.beChangedVariableName"
                    />
                  </div>
                  <div style="width: 70px; margin-left: 10px; text-align: left">
                    值
                  </div>
                  <div style="flex: 1">
                    <input
                      @input="countQuestionMarksForChangeVariableValue(item)"
                      style="border-bottom: solid black 1px; color: black"
                      v-model="item.beChangedVariableValue"
                    />
                  </div>
                </div>
                <div
                  v-if="
                    item.eventType == 1 ||
                    item.eventType == 0 ||
                    item.eventType == 2 ||
                    item.eventType == 6
                  "
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <div>指令数据（用？表示需要填充的变量）</div>
                  <div>
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      @input="countQuestionMarksForInput(item)"
                      v-model="item.instructionData"
                    />
                  </div>
                </div>
                <div
                  v-if="
                    item.eventType == 1 ||
                    item.eventType == 0 ||
                    item.eventType == 2 ||
                    item.eventType == 3
                  "
                  style="width: 100%; display: flex; flex-direction: column"
                >
                  <div
                    style="display: flex; align-items: center; margin: 10px 0"
                    v-for="(item1, index1) in item.inputValueArr"
                    :key="index1"
                  >
                    <div>变量{{ index1 + 1 }}表达式</div>
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      v-model="item1.valueName"
                    />
                  </div>
                </div>
                <div
                  v-if="
                    item.eventType == 1 ||
                    item.eventType == 0 ||
                    item.eventType == 2
                  "
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <el-checkbox v-model="item.getReturn" style="color: white"
                    >接收返回值</el-checkbox
                  >
                  <div>返回值提取格式（用?表示需要被提取的值）</div>
                  <input
                    style="border-bottom: solid black 1px; color: black"
                    @input="countQuestionMarks(item)"
                    v-model="item.returnFormat"
                  />
                </div>
                <div
                  v-if="
                    item.eventType == 1 ||
                    item.eventType == 0 ||
                    item.eventType == 2
                  "
                  style="width: 100%; display: flex; flex-direction: column"
                >
                  <div
                    style="display: flex; align-items: center; margin: 10px 0"
                    v-for="(item1, index1) in item.returnValueArr"
                    :key="index1"
                  >
                    <div>变量{{ index1 + 1 }}名称</div>
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      v-model="item1.valueName"
                    />
                  </div>
                </div>
                <div
                  v-if="item.eventType == 8"
                  style="width: 100%; display: flex; align-items: center"
                >
                  <div>命令行指令</div>
                  <input v-model="item.instructionData" type="text" />
                </div>
              </div>
            </div>
            <el-button @click="delAudioCommand(andioIndex)" type="danger"
              >删除语音</el-button
            >
          </el-collapse-item>
        </el-collapse>

        <div
          v-if="addNewAudioWinshow"
          style="
            width: 100%;
            display: flex;
            flex-direction: column;
            color: black;
          "
        >
          <div
            style="
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div>指令名称：</div>
            <input
              style="border-bottom: solid black 1px; color: black"
              type="text"
              v-model="addAudioCommandForm.commandName"
            />
          </div>
          <div
            style="
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div>指令口令：</div>
            <input
              style="border-bottom: solid black 1px; color: black"
              type="text"
              v-model="addAudioCommandForm.commandAudio"
            />
          </div>
          <div
            v-for="(item, index) in addAudioCommandForm.audioCommandList"
            :key="index"
            style="width: 100%; display: flex; flex-direction: column"
          >
            <div
              style="
                width: 100%;
                display: flex;
                align-items: center;
                margin: 10px 0;
              "
            >
              <div style="width: 80px; text-align: left">指令类型</div>
              <div style="display: flex; align-items: center; flex: 1">
                <el-select
                  style="width: 100px"
                  @change="changeEventType(item)"
                  v-model="item.eventType"
                  placeholder="请选择指令类型"
                >
                  <el-option
                    v-for="(item1, index1) in instructionArr"
                    :key="item1.type"
                    :label="item1.type"
                    :value="index1"
                  >
                  </el-option>
                </el-select>
                <el-select
                  style="margin-left: 10px; width: 100px"
                  v-if="
                    item.sonInstructionArr != null &&
                    item.sonInstructionArr.length > 0
                  "
                  v-model="item.sonEventType"
                  placeholder="请选择类型"
                >
                  <el-option
                    v-for="(item1, index1) in item.sonInstructionArr"
                    :key="item1"
                    :label="item1"
                    :value="index1"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div
              v-if="
                item.eventType == 1 ||
                item.eventType == 2 ||
                item.eventType == 0
              "
              style="
                width: 100%;
                display: flex;
                align-items: center;
                margin: 10px 0;
              "
            >
              <div>IP地址</div>
              <div>
                <input
                  style="border-bottom: solid black 1px; color: black"
                  v-model="item.ipAddress"
                />
              </div>
              <div>端口号</div>
              <div>
                <input
                  style="border-bottom: solid black 1px; color: black"
                  v-model="item.port"
                />
              </div>
            </div>
            <div
              v-if="item.eventType == 6"
              style="
                width: 100%;
                display: flex;
                align-items: center;
                margin: 10px 0;
              "
            >
              <div style="width: 80px; text-align: left">串口编号</div>
              <div style="flex: 1">
                <input
                  style="border-bottom: solid black 1px; color: black"
                  type="number"
                  v-model="item.serialNumber"
                />
              </div>
              <div style="width: 70px; margin-left: 10px; text-align: left">
                波特率
              </div>
              <div style="flex: 1">
                <input
                  style="border-bottom: solid black 1px; color: black"
                  type="number"
                  v-model="item.baudRate"
                />
              </div>
              <div style="width: 70px; margin-left: 10px; text-align: left">
                数据位
              </div>
              <div style="flex: 1">
                <input
                  style="border-bottom: solid black 1px; color: black"
                  type="number"
                  v-model="item.dataBits"
                />
              </div>
              <div style="width: 70px; margin-left: 10px; text-align: left">
                停止位
              </div>
              <div style="flex: 1">
                <input
                  style="border-bottom: solid black 1px; color: black"
                  type="number"
                  v-model="item.stopBits"
                />
              </div>
              <div style="width: 70px; margin-left: 10px; text-align: left">
                校验位
              </div>
              <div style="flex: 1">
                <input
                  style="border-bottom: solid black 1px; color: black"
                  type="number"
                  v-model="item.parityBits"
                />
              </div>
            </div>
            <div
              v-if="item.eventType == 3"
              style="
                width: 100%;
                display: flex;
                align-items: center;
                margin: 10px 0;
              "
            >
              <div style="width: 80px; text-align: left">变量名称</div>
              <div style="flex: 1">
                <input
                  style="border-bottom: solid black 1px; color: black"
                  v-model="item.beChangedVariableName"
                />
              </div>
              <div style="width: 70px; margin-left: 10px; text-align: left">
                值
              </div>
              <div style="flex: 1">
                <input
                  @input="countQuestionMarksForChangeVariableValue(item)"
                  style="border-bottom: solid black 1px; color: black"
                  v-model="item.beChangedVariableValue"
                />
              </div>
            </div>
            <div
              v-if="
                item.eventType == 1 ||
                item.eventType == 0 ||
                item.eventType == 2 ||
                item.eventType == 6
              "
              style="
                width: 100%;
                display: flex;
                align-items: center;
                margin: 10px 0;
              "
            >
              <div>指令数据（用？表示需要填充的变量）</div>
              <div>
                <input
                  style="border-bottom: solid black 1px; color: black"
                  @input="countQuestionMarksForInput(item)"
                  v-model="item.instructionData"
                />
              </div>
            </div>
            <div
              v-if="
                item.eventType == 1 ||
                item.eventType == 0 ||
                item.eventType == 2 ||
                item.eventType == 3
              "
              style="width: 100%; display: flex; flex-direction: column"
            >
              <div
                style="display: flex; align-items: center; margin: 10px 0"
                v-for="(item1, index1) in item.inputValueArr"
                :key="index1"
              >
                <div>变量{{ index1 + 1 }}表达式</div>
                <input
                  style="border-bottom: solid black 1px; color: black"
                  v-model="item1.valueName"
                />
              </div>
            </div>
            <div
              v-if="
                item.eventType == 1 ||
                item.eventType == 0 ||
                item.eventType == 2
              "
              style="
                width: 100%;
                display: flex;
                align-items: center;
                margin: 10px 0;
              "
            >
              <el-checkbox v-model="item.getReturn" style="color: white"
                >接收返回值</el-checkbox
              >
              <div>返回值提取格式（用?表示需要被提取的值）</div>
              <input
                style="border-bottom: solid black 1px; color: black"
                @input="countQuestionMarks(item)"
                v-model="item.returnFormat"
              />
            </div>
            <div
              v-if="
                item.eventType == 1 ||
                item.eventType == 0 ||
                item.eventType == 2
              "
              style="width: 100%; display: flex; flex-direction: column"
            >
              <div
                style="display: flex; align-items: center; margin: 10px 0"
                v-for="(item1, index1) in item.returnValueArr"
                :key="index1"
              >
                <div>变量{{ index1 + 1 }}名称</div>
                <input
                  style="border-bottom: solid black 1px; color: black"
                  v-model="item1.valueName"
                />
              </div>
            </div>
            <div
              v-if="item.eventType == 8"
              style="width: 100%; display: flex; align-items: center"
            >
              <div>命令行指令</div>
              <input v-model="item.instructionData" type="text" />
            </div>
          </div>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <el-button @click="addCommandInAudioCommand">添加指令</el-button>
          </div>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <el-button
            v-if="!addNewAudioWinshow"
            @click="addAudioCommand"
            type="primary"
            style="margin: 10px 0"
            >新增语音</el-button
          >
          <el-button
            v-if="addNewAudioWinshow"
            @click="saveNewAudio"
            type="primary"
            style="margin: 10px 0"
            >保存语音</el-button
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addAudioCommandDialog = false">取 消</el-button>
        <el-button type="primary" @click="addAudioCommandDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <vdr
      :parent="true"
      :onDragStart="onDragStartWrapper(item, index)"
      :onDrag="onDragCallback"
      :onResize="onResizeCallback"
      @dragstop="onDragstop"
      @refLineParams="getRefLineParams"
      :grid="[1, 1]"
      :w="item.w"
      :h="item.h"
      :x="item.x"
      :y="item.y"
      :z="item.z"
      v-for="(item, index) in webPageArr"
      :key="index"
      :snap="true"
      :snap-tolerance="10"
    >
      <div
        style="
          background: white;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: black;
        "
      >
        网页
      </div>
    </vdr>

    <vdr
      :parent="true"
      :onDragStart="onDragStartWrapper(item, index)"
      :onDrag="onDragCallback"
      :onResize="onResizeCallback"
      @dragstop="onDragstop"
      @refLineParams="getRefLineParams"
      :grid="[1, 1]"
      :w="item.w"
      :h="item.h"
      :x="item.x"
      :y="item.y"
      :z="item.z"
      v-for="(item, index) in buttonArr"
      :key="index"
      :snap="true"
      :snap-tolerance="10"
    >
      <el-button
        style="
          width: 100%;
          height: 100%;
          background-repeat: no-repeat;
          background-position: center;
          background-color: transparent;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        "
        :style="{
          backgroundImage:
            'url(' + 'http://' + resourceIp + ':8094/' + item.background + ')',
          backgroundSize: item.w + 'px ' + item.h + 'px',
          fontSize: item.fontSize + 'px',
          transform: 'rotate(' + item.rotate + 'deg)',
          color: item.fontColor,
          borderRadius: item.borderCorner + 'px',
          backgroundColor:
            item.backgroundColor == null || item.backgroundColor == ''
              ? 'transparent'
              : item.backgroundColor,
        }"
        >{{
          language == 0
            ? item.textChinese
            : language == 1
            ? item.textTraditional
            : item.textEnglish
        }}</el-button
      >
    </vdr>

    <vdr
      :parent="true"
      :onDragStart="onDragStartWrapper(item, index)"
      :onDrag="onDragCallback"
      :onResize="onResizeCallback"
      @dragstop="onDragstop"
      @refLineParams="getRefLineParams"
      :grid="[1, 1]"
      :w="item.w"
      :h="item.h"
      :x="item.x"
      :y="item.y"
      :z="item.z"
      v-for="(item, index) in switchArr"
      :key="index"
      :snap="true"
      :snap-tolerance="10"
    >
      <van-switch
        style="height: 100%"
        :style="{
          width: item.w + 'px',
        }"
        v-model="item.value"
        :size="item.h + 'px'"
        :active-color="item.activeColor == null ? '#ee0a24' : item.activeColor"
        :inactive-color="
          item.unActiveColor == null ? '#dcdee0' : item.unActiveColor
        "
      />
    </vdr>

    <vdr
      :parent="true"
      :onDragStart="onDragStartWrapper(item, index)"
      :onDrag="onDragCallback"
      :onResize="onResizeCallback"
      @dragstop="onDragstop"
      @refLineParams="getRefLineParams"
      :grid="[1, 1]"
      :w="item.w"
      :h="item.h"
      :x="item.x"
      :y="item.y"
      :z="item.z"
      v-for="(item, index) in sliderArr"
      :key="index"
      :snap="true"
      :snap-tolerance="10"
    >
      <van-slider
        :vertical="item.vertical"
        v-model="item.value"
        :inactive-color="item.railBackground"
        :bar-height="item.vertical ? item.w + 'px' : item.h + 'px'"
        :active-color="item.railProgressColor"
        :style="{
          border:
            'solid ' + item.railBorderWidth + 'px ' + item.railBorderColor,
          borderRadius: item.railBorderRoundCorner + 'px',
        }"
      >
        <template #button>
          <img
            :src="'http://' + resourceIp + ':8094/' + item.sliderBackground"
            :style="{
              width: item.sliderWidth + 'px',
              height: item.sliderHeight + 'px',
              marginLeft: item.sliderMarginLeft + 'px',
              marginRight: item.sliderMarginRight + 'px',
              marginTop: item.sliderMarginTop + 'px',
              marginBottom: item.sliderMarginBottom + 'px',
            }"
            draggable="false"
          />
        </template>
      </van-slider>
    </vdr>

    <vdr
      :parent="true"
      :onDragStart="onDragStartWrapper(item, index)"
      :onDrag="onDragCallback"
      :onResize="onResizeCallback"
      @dragstop="onDragstop"
      @refLineParams="getRefLineParams"
      :grid="[1, 1]"
      :w="item.w"
      :h="item.h"
      :x="item.x"
      :y="item.y"
      :z="item.z"
      v-for="(item, index) in imgArr"
      :key="index"
      :snap="true"
      :snap-tolerance="10"
    >
      <img
        :src="'http://' + resourceIp + ':8094/' + item.src"
        style="width: 100%; height: 100%"
        :style="{
          transform: 'rotate(' + item.rotate + 'deg)',
        }"
        alt=""
      />
    </vdr>

    <vdr
      :parent="true"
      :onDragStart="onDragStartWrapper(item, index)"
      :onDrag="onDragCallback"
      :onResize="onResizeCallback"
      @dragstop="onDragstop"
      @refLineParams="getRefLineParams"
      :grid="[1, 1]"
      :w="item.w"
      :h="item.h"
      :x="item.x"
      :y="item.y"
      :z="item.z"
      v-for="(item, index) in videoArr"
      :key="index"
      :snap="true"
      :snap-tolerance="10"
    >
      <div style="width: 100%; height: 100%; background: black" alt=""></div>
    </vdr>

    <vdr
      :parent="true"
      :onDragStart="onDragStartWrapper(item, index)"
      :onDrag="onDragCallback"
      @dragstop="onDragstop"
      :onResize="onResizeCallback"
      @refLineParams="getRefLineParams"
      :grid="[1, 1]"
      :w="item.w"
      :h="item.h"
      :x="item.x"
      :y="item.y"
      :z="item.z"
      v-for="(item, index) in inputArr"
      :key="index"
      :snap="true"
      :snap-tolerance="10"
    >
      <textarea
        v-model="
          item[
            language == '0'
              ? 'textValue'
              : language == '1'
              ? 'traditionalTextValue'
              : 'englishTextValue'
          ]
        "
        style="
          width: 100%;
          height: 100%;
          outline: 0;
          border: 0;
          background-color: transparent;
        "
        :style="{
          fontSize: item.fontSize + 'px',
          color: item.fontColor,
          transform: 'rotate(' + item.rotate + 'deg)',
        }"
      ></textarea>
    </vdr>

    <span
      class="ref-line v-line"
      v-for="item in vLine"
      v-show="item.display"
      :style="{
        left: item.position,
        top: item.origin,
        height: item.lineLength,
      }"
    />
    <span
      class="ref-line h-line"
      v-for="item in hLine"
      v-show="item.display"
      :style="{ top: item.position, left: item.origin, width: item.lineLength }"
    />
  </div>
</template>

<script>
import Vue from "vue";
import { Slider, Switch } from "vant";
import "vant/lib/slider/style";
import "vant/lib/switch/style";
import request from "../axios/request";
import html2canvas from "html2canvas";
import "vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css";
import { mapState } from "vuex";

export default {
  components: {
    [Slider.name]: Slider,
    [Switch.name]: Switch,
  },
  computed: {
    rightBarX() {
      return window.innerWidth - 180;
    },
    ...mapState({
      refresh: (state) => state.refresh,
    }),
  },
  data() {
    return {
      addingGroup: null,
      buttonGroupName: [],
      hideEditBar: false,
      curComponentIndex: null,
      instructionArr: [
        {
          type: "TCP",
          sonType: [],
        },
        {
          type: "UDP",
          sonType: ["单播", "组播", "广播"],
        },
        {
          type: "HTTP",
          sonType: ["GET", "POST"],
        },
        {
          type: "变量赋值",
          sonType: [],
        },
        {
          type: "按扭组合",
          sonType: [],
        },
        {
          type: "播放音频",
          sonType: [],
        },
        {
          type: "串口通讯",
          sonType: [],
        },
        {
          type: "信息发布",
          sonType: ["文本", "视频", "图片"],
        },
        {
          type: "命令行指令",
          sonType: [],
        },
      ],
      audioList: [],

      sonInstructionArr: [],
      pageName: null,
      pageBackgroundImage: null,
      imgArr: [],
      switchArr: [],
      buttonArr: [],
      sliderArr: [],
      inputArr: [],
      videoArr: [],
      webPageArr: [],
      vLine: [],
      hLine: [],
      curComponent: {
        type: null,
        addedButtonGroupArr: [],
        text: null,
        fontSize: "10px",
        fontColor: "black",
        backgroundColor: null,
        borderCorner: 0,
        background: null,
        src: null,
        sliderBackground: null,
        conditionShow: false,
        displayVariableName: null,
        displayVariableValue: null,
        min: 0,
        max: 100,
        w: 0,
        h: 0,
        x: 0,
        y: 0,
        z: 0,
        railBackground: null,
        railProgressColor: null,
        railBorderWidth: null,
        railBorderColor: null,
        railBorderRoundCorner: null,
        sliderWidth: null,
        sliderHeight: null,
        sliderMarginTop: null,
        sliderMarginBottom: null,
        sliderMarginLeft: null,
        sliderMarginRight: null,
        textValue: null,
        traditionalTextValue: null,
        englishTextValue: null,
        sliderVariable: null,
        switchVariable: null,
        switchVariableValue: null,
        switchEventEnable: null,
        switchCommandList: [],
        clickCommandList: [],
        initCommandList: [],
        slideCommandList: [],
        keepLast: null,
        lastSlideName: null,
      },
      pageId: null,
      highestZIndex: 0,
      language: 0,
      resourceIp: null,
      addButtonGroupWin: false,
      newButtonGroupName: null,
      tokenId: null,
      editBarWidth: null,
      editBarTop: null,
      editBarHeight: 500,

      addAudioCommandDialog: false,
      addAudioCommandForm: {
        commandName: null,
        commandAudio: null,
        audioCommandList: [],
      },
      activeNames: [],
      addNewAudioWinshow: false,
    };
  },

  watch: {
    refresh(newValue) {
      if (newValue === true) {
        this.cleanPage();
        this.getPageInfoByPageName();
        this.getAllComponent();
      }
    },
  },
  mounted() {
    this.editBarWidth = window.innerWidth;
    this.editBarHeight = window.innerHeight * 0.5;
    this.editBarTop = window.innerHeight - this.editBarHeight;
    this.resourceIp = this.extractIPFromURL(window.location.origin);
    this.pageName = this.$route.params.pageName;
    this.language = this.$route.params.language;
    if (this.pageName == "null") {
      this.pageName = null;
      return;
    }
    this.getPageInfoByPageName();
    this.getAllComponent();
    let wsTimeout = setTimeout(() => {
      this.submitWS();
      clearTimeout(wsTimeout);
    }, 500);
  },
  beforeDestroy() {
    this.disConnectPage();
  },
  methods: {
    disConnectPage() {
      this.$nextTick(() => {
        this.$store.commit(
          "sendMessageBySocket",
          "disconnect#" + this.pageName + "#" + this.$store.state.wsToken
        );
      });
    },
    submitWS() {
      this.$nextTick(() => {
        this.$store.commit(
          "sendMessageBySocket",
          "connect#" + this.pageName + "#" + this.$store.state.wsToken
        );
      });
    },
    saveNewAudio() {
      this.audioList.push(this.addAudioCommandForm);
      this.addNewAudioWinshow = false;
    },
    handleChange(val) {
      console.log(val);
      if (val != null && val != "") {
        this.addAudioCommandForm = this.audioList[Number(val) - 1];
        this.addNewAudioWinshow = false;
        if (
          this.addAudioCommandForm.audioCommandList != null &&
          this.addAudioCommandForm.audioCommandList.length > 0
        ) {
          console.log(this.addAudioCommandForm.audioCommandList);
          for (
            let index = 0;
            index < this.addAudioCommandForm.audioCommandList.length;
            index++
          ) {
            const element = this.addAudioCommandForm.audioCommandList[index];

            if (element.eventType != null) {
              element.sonInstructionArr =
                this.instructionArr[element.eventType].sonType;
            }
          }
        }
      } else {
        console.log("val为空");
      }
    },
    openAddAudioWin() {
      this.addAudioCommandDialog = true;
      this.addAudioCommandForm = {
        commandName: null,
        commandAudio: null,
        audioCommandList: [],
      };
    },

    delAudioCommand(index) {
      this.audioList.splice(index, 1);
    },
    onResizeEditCallback(handle, x, y, width, height) {
      this.editBarTop = y;
      this.editBarHeight = height;
    },
    goOtherPage(path) {
      this.$router.push(path);
    },

    jumpToUrl(url) {
      window.location.href = "http://" + this.resourceIp + ":8094/" + url;
    },
    async uploadAudioFile(event, index, commandType) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.curComponent[commandType + "CommandList"][index].audioFilePath =
            res.data.data;
          event.target.value = "";
        }
      }
    },
    async uploadVideoFile(event, index, commandType) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.curComponent[commandType + "CommandList"][index].videoFilePath =
            res.data.data;
          event.target.value = "";
        }
      }
    },
    async uploadImageFile(event, index, commandType) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.curComponent[commandType + "CommandList"][index].imageFilePath =
            res.data.data;
          event.target.value = "";
        }
      }
    },
    UploadImage(index, id) {
      document.getElementById(id + index).click();
    },
    UploadAudio(index, id) {
      document.getElementById(id + index).click();
    },
    UploadVideo(index, id) {
      document.getElementById(id + index).click();
    },
    delAddedGroup(index) {
      this.curComponent.addedButtonGroupArr.splice(index, 1);
    },
    addedToButtonGroupArr() {
      console.log("触发成功", this.curComponent);
      if (!this.curComponent.addedButtonGroupArr.includes(this.addingGroup)) {
        this.curComponent.addedButtonGroupArr.push(this.addingGroup);
      }
      this.addingGroup = null;
    },
    addButtonGroup() {
      this.buttonGroupName.push(this.newButtonGroupName);
      this.newButtonGroupName = null;
    },
    extractIPFromURL(url) {
      // 定义正则表达式来匹配IP地址
      const ipRegex = /(?:\d{1,3}\.){3}\d{1,3}/;

      // 使用正则表达式查找匹配项
      const match = url.match(ipRegex);

      // 返回匹配到的IP地址（如果有的话）
      return match ? match[0] : null;
    },
    delCommand(item, commandListName, index) {
      this.curComponent[commandListName].splice(index, 1);
    },
    addInitEvent() {
      if (
        this.curComponent.initCommandList == null ||
        this.curComponent.initCommandList == undefined
      ) {
        Vue.set(this.curComponent, "initCommandList", []);
      }
      this.curComponent.initCommandList.push({
        eventType: null,
        sonEventType: null,
        ipAddress: null,
        port: null,
        instructionData: null,
        inputValueArr: [],
        getReturn: null,
        returnFormat: null,
        returnValueArr: [],
        delay: null,
        audioFilePath: null,
      });
    },
    addSwitchEvent() {
      if (
        this.curComponent.switchCommandList == null ||
        this.curComponent.switchCommandList == undefined
      ) {
        Vue.set(this.curComponent, "switchCommandList", []);
      }
      this.curComponent.switchCommandList.push({
        eventType: null,
        sonEventType: null,
        ipAddress: null,
        port: null,
        instructionData: null,
        inputValueArr: [],
        getReturn: null,
        returnFormat: null,
        returnValueArr: [],
        delay: null,
        audioFilePath: null,
      });
    },
    addSliderEvent() {
      if (
        this.curComponent.slideCommandList == null ||
        this.curComponent.slideCommandList == undefined
      ) {
        Vue.set(this.curComponent, "slideCommandList", []);
      }
      this.curComponent.slideCommandList.push({
        eventType: null,
        sonEventType: null,
        ipAddress: null,
        port: null,
        instructionData: null,
        inputValueArr: [],
        getReturn: null,
        returnFormat: null,
        returnValueArr: [],
        delay: null,
        audioFilePath: null,
      });
    },
    addClickEvent() {
      if (
        this.curComponent.clickCommandList == null ||
        this.curComponent.clickCommandList == undefined
      ) {
        Vue.set(this.curComponent, "clickCommandList", []);
      }
      this.curComponent.clickCommandList.push({
        eventType: null,
        instructionData: null,
        ipAddress: null,
        port: null,
        getReturn: false,
        returnFormat: null,
        returnValueArr: [],
        sonEventType: null,
        delay: null,
        audioFilePath: null,
        videoFilePath: null,
        imageFilePath: null,
      });
    },
    cleanPage() {
      this.curComponentIndex = null;
      this.pageBackgroundImage = null;

      this.imgArr = [];
      this.switchArr = [];
      this.buttonArr = [];
      this.sliderArr = [];
      this.inputArr = [];
      this.videoArr = [];
      this.initComponent();
      this.highestZIndex = 0;
    },
    initComponent() {
      this.curComponent = {
        type: null,
        addedButtonGroupArr: [],
        text: null,
        fontSize: "10px",
        fontColor: "black",
        backgroundColor: null,
        borderCorner: 0,
        background: null,
        src: null,
        sliderBackground: null,
        conditionShow: false,
        displayVariableName: null,
        displayVariableValue: null,
        min: 0,
        max: 100,
        w: 0,
        h: 0,
        x: 0,
        y: 0,
        z: 0,
        railBackground: null,
        railProgressColor: null,
        railBorderWidth: null,
        railBorderColor: null,
        railBorderRoundCorner: null,
        sliderWidth: null,
        sliderHeight: null,
        sliderMarginTop: null,
        sliderMarginBottom: null,
        sliderMarginLeft: null,
        sliderMarginRight: null,
        textValue: null,
        traditionalTextValue: null,
        englishTextValue: null,
        sliderVariable: null,
        switchVariable: null,
        switchVariableValue: null,
        switchEventEnable: null,
        switchCommandList: [],
        clickCommandList: [],
        initCommandList: [],
        slideCommandList: [],
        keepLast: null,
        lastSlideName: null,
      };
    },
    countQuestionMarksForInput(item) {
      if (item.instructionData == null) {
        return;
      }

      this.$set(item, "inputValueArr", []);
      let index = 0;
      while (index !== -1) {
        index = item.instructionData.indexOf("?", index);
        if (index !== -1) {
          index++;
          item.inputValueArr.push({
            valueName: "",
          });
        }
      }
    },
    countQuestionMarksForChangeVariableValue(item) {
      if (item.beChangedVariableValue == null) {
        return;
      }

      this.$set(item, "inputValueArr", []);
      let index = 0;
      while (index !== -1) {
        index = item.beChangedVariableValue.indexOf("?", index);
        if (index !== -1) {
          index++;
          item.inputValueArr.push({
            valueName: "",
          });
        }
      }
    },
    countQuestionMarks(item) {
      if (item.returnFormat == null) {
        return;
      }
      item.returnValueArr = [];
      let index = 0;
      while (index !== -1) {
        index = item.returnFormat.indexOf("?", index); // 从当前index开始查找下一个问号
        if (index !== -1) {
          index++; // 移动到下一个字符的位置，继续查找
          item.returnValueArr.push({
            valueName: "",
          });
        }
      }
    },
    addAudioCommand() {
      this.addNewAudioWinshow = true;
      this.activeNames = [];
      this.addAudioCommandForm = {
        commandName: null,
        commandAudio: null,
        audioCommandList: [],
      };
    },
    async getAllComponent() {
      let res = await request({
        url:
          "/page/api/getAllComponentByPageName/" +
          this.pageName +
          "/" +
          document.documentElement.clientWidth +
          "/" +
          document.documentElement.clientHeight + 
          "/false",
        method: "GET",
      });
      if (res.data.status == 200) {
        this.buttonArr.push(...res.data.data.buttonList);
        this.sliderArr.push(...res.data.data.sliderList);
        this.inputArr.push(...res.data.data.textViewList);
        this.switchArr.push(...res.data.data.switchList);
        this.imgArr.push(...res.data.data.imageList);
        this.videoArr.push(...res.data.data.videoList);
        this.webPageArr.push(...res.data.data.webPageList);
      }
    },
    async getPageInfoByPageName() {
      let res = await request({
        url: "/page/api/getPageInfoByPageName/" + this.pageName,
        method: "GET",
      });
      if (res.data.status == 200) {
        this.pageId = res.data.data.id;
        this.pageName = res.data.data.pageName;
        this.pageBackgroundImage = res.data.data.pageBackgroundImage;
        this.highestZIndex = res.data.data.highestZIndex;
        this.buttonGroupName = res.data.data.buttonGroupName;
        this.audioList = res.data.data.audioList;
      }
    },
    async saveNewPage() {
      let that = this;
      let saveTimeout = setTimeout(async () => {
        let res = null;
        if (that.pageId == null) {
          res = await request({
            url: "/page/api/saveNewPage",
            method: "POST",
            data: {
              pageName: that.pageName,
              pageBackgroundImage: that.pageBackgroundImage,
              pageWidth: document.body.clientWidth,
              pageHeight: document.body.clientHeight,
              highestZIndex: that.highestZIndex,
              buttonGroupName: that.buttonGroupName,
              audioList: that.audioList,
            },
          });
        } else {
          res = await request({
            url: "/page/api/updatePage",
            method: "POST",
            data: {
              id: that.pageId,
              pageName: that.pageName,
              pageBackgroundImage: that.pageBackgroundImage,
              pageWidth: document.documentElement.clientWidth,
              pageHeight: document.documentElement.clientHeight,
              highestZIndex: that.highestZIndex,
              buttonGroupName: that.buttonGroupName,
              audioList: that.audioList,
            },
          });
        }
        if (res.data.status == 200) {
          that.pageId = res.data.data;
          that.saveAllComponents();
        }
        clearTimeout(saveTimeout);
      }, 100);
    },
    addCommandInAudioCommand() {
      this.addAudioCommandForm.audioCommandList.push({
        eventType: null,
        sonInstructionArr: null,
        type: "AUDIO",
        sonEventType: null,
        ipAddress: null,
        port: null,
        serialNumber: null,
        baudRate: null,
        dataBits: null,
        stopBits: null,
        parityBits: null,
        beChangedVariableName: null,
        beChangedVariableValue: null,
        instructionData: null,
        inputValueArr: [],
        getReturn: false,
        returnFormat: null,
        returnValueArr: [],
      });
    },
    async saveAllComponents() {
      let res = await request({
        url:
          "/page/api/saveAllComponents/" +
          this.pageId +
          "/" +
          this.$store.state.wsToken+
          "/false",
        method: "POST",
        data: {
          buttonList: this.buttonArr,
          switchList: this.switchArr,
          sliderList: this.sliderArr,
          imageList: this.imgArr,
          textList: this.inputArr,
          videoList: this.videoArr,
          webPageList: this.webPageArr,
        },
      });
      if (res.data.status == 200) {
        this.getImg();
      }
    },
    //截图方法
    getImg() {
      html2canvas(document.getElementById("canvas"), {
        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
        ignoreElements: (element) => {
          if (
            element.id === "editBar" ||
            element.id === "hideEditBar" ||
            element.id === "showEditBar"
          )
            return true;
        },
      }).then((canvas) => {
        //截图用img元素承装，显示在页面的上
        let imgData = canvas.toDataURL("image/jpeg"); // toDataURL :图片格式转成 base64
        this.updateImgOfPage(imgData);
      });
    },
    async updateImgOfPage(imgData) {
      await request({
        url: "/page/api/updatePageImg",
        method: "POST",
        data: {
          imgData: imgData,
          pageId: this.pageId,
        },
      });
    },
    delCurComponent() {
      console.log(this.curComponent.type);
      switch (this.curComponent.type) {
        case "BUTTON":
          this.buttonArr.splice(this.curComponentIndex, 1);
          break;
        case "IMAGE":
          this.imgArr.splice(this.curComponentIndex, 1);
          break;
        case "SWITCH":
          this.switchArr.splice(this.curComponentIndex, 1);
          break;
        case "SLIDER":
          this.sliderArr.splice(this.curComponentIndex, 1);
          break;
        case "TEXTVIEW":
          this.inputArr.splice(this.curComponentIndex, 1);
          break;
        case "VIDEO":
          this.videoArr.splice(this.curComponentIndex, 1);
          break;
        case "WEBPAGE":
          this.webPageArr.splice(this.curComponentIndex, 1);
          break;

        default:
          break;
      }
      this.initComponent();
      this.curComponentIndex = null;
    },
    async copyCurComponent() {
      let copy = JSON.parse(JSON.stringify(this.curComponent));
      switch (this.curComponent.type) {
        case "BUTTON":
          this.buttonArr.push(copy);
          break;
        case "IMAGE":
          this.imgArr.push(copy);
          break;
        case "SLIDER":
          this.sliderArr.push(copy);
          break;
        case "TEXTVIEW":
          this.inputArr.push(copy);
          break;
        case "VIDEO":
          this.videoArr.push(copy);
          break;
        case "WEBPAGE":
          this.webPageArr.push(copy);
          break;
        default:
          break;
      }
    },

    changeEventType(item) {
      if (item.eventType == "4" && item.type != "AUDIO") {
        this.curComponent.addedButtonGroupArr = [];
      }
      item.sonInstructionArr = this.instructionArr[item.eventType].sonType;
    },
    async uploadPhotoForSlider(event) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.curComponent.sliderBackground = res.data.data;
          event.target.value = "";
        }
      }
    },
    async uploadPhotoForImg(event) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.curComponent.src = res.data.data;
          event.target.value = "";
        }
      }
    },
    async uploadPhotoForButton(event) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.curComponent.background = res.data.data;
          event.target.value = "";
        }
      }
    },
    clickFilenputForSlider() {
      let fileInputForSlider = document.getElementById("fileInputForSlider");
      fileInputForSlider.click();
    },
    clickFilenputForImg() {
      let fileInputForImg = document.getElementById("fileInputForImg");
      fileInputForImg.click();
    },
    clickFilenputForButton() {
      let fileInputForButton = document.getElementById("fileInputForButton");
      fileInputForButton.click();
    },
    onResizeCallback(handle, x, y, width, height) {
      if (this.curComponent.type != "SWITCH") {
        this.curComponent.w = width;
        this.curComponent.h = height;
      } else {
        this.curComponent.w = height * 2;
        this.curComponent.h = height;
      }
    },
    onDragStartWrapper(item, index) {
      return (event, ...args) => {
        this.onDragStartCallback(item, index);
      };
    },
    clickFilenput() {
      let fileInput = document.getElementById("fileInput");
      fileInput.click();
    },
    async uploadPhoto(event) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.pageBackgroundImage = res.data.data;
          event.target.value = "";
        }
      }
    },
    onDragCallback(x, y) {
      // console.log(x, y);
      this.curComponent.x = x;
      this.curComponent.y = y;
    },
    onDragstop(x, y) {
      this.curComponent.x = x;
      this.curComponent.y = y;
    },
    onDragStartCallback(item, index) {
      this.curComponent = item;
      this.curComponentIndex = index;
      if (item.clickCommandList != null && item.clickCommandList.length > 0) {
        for (let index = 0; index < item.clickCommandList.length; index++) {
          const element = item.clickCommandList[index];

          if (element.eventType != null) {
            element.sonInstructionArr =
              this.instructionArr[element.eventType].sonType;
          }
        }
      }
    },
    createButton() {
      this.buttonArr.push({
        type: "BUTTON",
        textChinese: "按钮",
        textTraditional: "按鈕",
        textEnglish: "button",
        background: null,
        w: 100,
        h: 50,
        x: 50,
        y: 50,
        z: this.highestZIndex++,
        clickEventEnable: false,
        addedToGroup: false,
        addedButtonGroupArr: [],
        borderCorner: 0,
        backgroundColor: null,
        clickCommandList: [
          {
            eventType: null,
            instructionData: null,
            ipAddress: null,
            port: null,
            getReturn: false,
            returnFormat: null,
            returnValueArr: [],
            sonEventType: null,
            beChangedVariableName: null,
            beChangedVariableValue: null,
            triggerGroup: null,
            hexadecimal: false,
            delay: null,
            audioFilePath: null,
            videoFilePath: null,
          },
        ],
        fontSize: 15,
      });
    },
    createSwitch() {
      this.switchArr.push({
        type: "SWITCH",
        value: false,
        w: 100,
        h: 50,
        x: 50,
        y: 50,
        z: this.highestZIndex++,
        activeColor: null,
        unActiveColor: null,
        switchVariable: null,
        switchVariableValue: null,
        switchEventEnable: false,
        switchCommandList: [
          {
            eventType: null,
            sonEventType: null,
            ipAddress: null,
            port: null,
            beChangedVariableName: null,
            beChangedVariableValue: null,
            instructionData: null,
            getReturn: false,
            returnFormat: null,
            inputValueArr: [],
            returnValueArr: [],
            delay: null,
            audioFilePath: null,
          },
        ],
      });
      console.log(this.switchArr);
    },
    createSlider() {
      this.sliderArr.push({
        type: "SLIDER",
        value: 0,
        w: 100,
        h: 50,
        x: 50,
        y: 50,
        z: this.highestZIndex++,
        sliderVariable: null,
        inputValueArr: [],
        vertical: false,
        show: true,
        conditionShow: false,
        displayExpression: null,
        min: 0,
        max: 100,
        railBackground: "black",
        railProgressColor: "#FAE491",
        railBorderWidth: 1,
        railBorderColor: "white",
        railBorderRoundCorner: 5,
        sliderBackground: "center-control/thumb.png",
        sliderWidth: 50,
        sliderHeight: 30,
        sliderMarginTop: 0,
        sliderMarginBottom: 0,
        sliderMarginLeft: 0,
        sliderMarginRight: 0,
        slideCommandList: [
          {
            eventType: null,
            sonEventType: null,
            ipAddress: null,
            port: null,
            instructionData: null,
            inputValueArr: [],
            getReturn: null,
            returnFormat: null,
            returnValueArr: [],
            delay: null,
            audioFilePath: null,
          },
        ],
      });
      console.log(this.sliderArr);
    },
    createWebPage() {
      this.webPageArr.push({
        type: "WEBPAGE",
        w: 100,
        h: 50,
        x: 50,
        y: 50,
        z: this.highestZIndex++,
        webPageUrlVariable: null,
      });
    },
    createVideo() {
      this.videoArr.push({
        type: "VIDEO",
        w: 100,
        h: 50,
        x: 50,
        y: 50,
        z: this.highestZIndex++,
        streamVariable: null,
      });
    },
    createImg() {
      this.imgArr.push({
        type: "IMAGE",
        src: "https://tse1-mm.cn.bing.net/th/id/OIP-C.ej59aUlPwCy9wqnJ5cms5wHaFj?w=281&h=211&c=7&r=0&o=5&dpr=1.5&pid=1.7",
        w: 100,
        h: 50,
        x: 50,
        y: 50,
        z: this.highestZIndex++,
      });
    },
    createTextView() {
      this.inputArr.push({
        type: "TEXTVIEW",
        textValue: "null",
        w: 100,
        h: 50,
        x: 50,
        y: 50,
        z: this.highestZIndex++,
        fontSize: 15,
        fontColor: "white",
      });
      console.log(this.inputArr);
    },
    getRefLineParams(params) {
      const { vLine, hLine } = params;
      this.vLine = vLine;
      this.hLine = hLine;
    },
  },
};
</script>

<style scoped>
.my-handle-class {
  /* 设置背景颜色 */
  width: 50px !important; /* 设置宽度 */
  height: 50px !important; /* 设置高度 */

  cursor: pointer; /* 设置鼠标悬停时的光标样式 */
  position: absolute;
  top: -50px !important;
  background: url("~@/assets/top.png") no-repeat center center / cover;
  left: 0 !important;
  z-index: 1003;
}
input {
  background: transparent;
  border: 0;
  border-bottom: solid white 1px;
  color: white;
}
.btnClass {
  background-size: cover;
}

.transparent-input .input__inner {
  background-color: transparent !important; /* 使用 !important 可以确保样式优先级更高 */
  border: 1px solid #ccc; /* 你可以根据需要调整边框样式 */
  color: #000; /* 确保文本颜色在透明背景下可见 */
}

/* 如果需要，你还可以添加额外的样式来确保在焦点时输入框仍然可见 */
.transparent-input .input__inner:focus {
  box-shadow: none; /* 移除焦点时的阴影 */
  border-color: #409eff; /* Element UI的默认蓝色边框，或者你可以自定义颜色 */
}

::-webkit-scrollbar {
  display: none; /* Chrome, Safari 和基于Webkit的浏览器 */
  overflow: auto; /* 保持内容的可滚动性 */
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none; /* Firefox */
}
</style>